<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>WHAT IP</title>
	<link rel="icon" href="./favicon.ico" type="image/x-icon">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<script src="./js/jquery-1.11.1.min.js"></script>
</head>
<style type="text/css">
	#ip{
		margin-top: 50px;
	}
	div{
		margin-left: 10px;
	}
</style>
<body>
	<div id='ip' >
		<h1 id='ip_title'>loading...</h1>
		<h2 id='ip_addr'>loading...</h2>
	</div>
	<div id='headers'>
		loading...
	</div>
</body>
<script type="text/javascript">
		function jQ (r) {
			// alert(r.data[0].location)
			$('#ip_addr').html('Address:&nbsp'+r.data[0].location);};
</script>
<script type="text/javascript">

		$(function () {
		
		$.get('https://httpbin.org/get', function (data) {
					var _headers = '<h3 style="display: inline;">Request Headers:</h3><br />',
	  				ip_res = data.origin;
	  				// alert(ip.match('/\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}/'));
	  				var ip_ = /\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}/;
					var ip = ip_.exec(ip_res);
					// alert(ip);

	  			for (var arg in data.headers) {
	  				_headers = _headers +'<b>'+ arg +':</b>&nbsp&nbsp'+ data.headers[arg] + '<br />'
	  			};
	  			$('#ip_title').html('IP:&nbsp'+ip);
	  			// $.get('http://api.map.baidu.com/location/ip?ak=DNDPTDnXOO2Fuzgzzsm4vsT1PBe5maIh&coor=bd09ll&ip=' + ip,function (r) {
	  			// 	$('#ip_addr').html(r.address);
	  			// },'jsonp');
	  			$.get('http://sp0.baidu.com/8aQDcjqpAAV3otqbppnN2DJv/api.php?query='+ip+'&co=&resource_id=6006&t=1433922612109&ie=utf8&oe=gbk&cb=op_aladdin_callback&format=json&tn=baidu&cb=jQ',function  (r) {
	  				// alert(r.data.location)
	  				// $('#ip_addr').html(r.address);
	  			},'jsonp');
	  			$('#headers').html(_headers);
		})
	});
</script>

</html>